<template>
  <span class="repo-title bold-span">我的知识库</span>
  <div class="repo-list">
  <el-card class="card-container" v-for="(repo, index) in repos" :key="repo.id" style="margin-bottom: 15px;">
      <template #header>
        <div class="card-header">
          <el-icon color="#409EFC"><Notebook /></el-icon> <span>{{ repo.title }}</span>
        </div>
      </template>
      <div class="repo-desc" @click="enterNote(repo)">{{ repo.description }}</div>
    </el-card>
  </div>
  <div v-if="loading" class="loading-more repo-title">正在加载...</div>
  <div v-if="!loading && !hasMore" class="no-more repo-title">没有更多了</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElCard, ElIcon, ElButton, ElPopover, ElMenu, ElMenuItem } from 'element-plus';
import useRepos from '@/views/home/components/useMyRepos';

export default defineComponent({
  name: 'MyKnowledgeBaseView',
  components: {
    ElCard,
    ElIcon,
    ElButton,
    ElPopover,
    ElMenu,
    ElMenuItem
  },
  setup() {
    const {
      repos,
      enterNote,
      popoverVisibilities,
      deleteRepo,
      loading,
      hasMore
    } = useRepos();

    return {
      repos,
      enterNote,
      popoverVisibilities,
      deleteRepo,
      loading,
      hasMore
    };
  }
});
</script>

<style scoped>

.repo-title {
  padding-left: 20px;
}

.bold-span {
  font-weight: bold;
  font-family: "黑体";
}

.card-container {
  border-radius: 10px;
}


.repo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.repo-desc {
  padding: 40px 10px;
  color: #737479d2;
  font-size: 12px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .repo-list {
    grid-template-columns: 1fr;
  }
}

</style>